<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="2">
				<p class="queryLabel">编码名称:</p>
			</el-col>
			<el-col :span="5">
				<el-input v-model="inputsearch"
				          size="small"
				          placeholder="请输入内容"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary"
				           size="small"
				           @click="indexmodlequery">搜索</el-button>
			</el-col>
			<el-col :span="15"
			        style="text-align: right;margin-right:-10px;">
				<el-button type="primary"
				           size="small"
				           @click='indexmodleAdd'>新增</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="indexmodleEdit">编辑</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="startindexmodle">启用</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="stopindexmodle">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table ref="multipleTable"
				          :data="tableData.dataList"
				          border
				          style="width: 100%"
				          @selection-change="handleSelectionChange">
					<el-table-column type="selection"
					                 width="55">
					</el-table-column>
					<el-table-column prop="rName"
					                 label="角色名称">
					</el-table-column>
					<el-table-column prop="tn"
					                 label="模板名称">
					</el-table-column>
					<el-table-column prop="status"
					                 label="模板状态"
					                 :formatter="timeFormates">>
					</el-table-column>
				</el-table>
				<el-pagination small
				               @size-change="handleSizeChange"
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogform">
			<el-form :model="dataFormModelData"
			         label-width="80px"
			         ref="datamodelForm"
			         :rules="modelRule">
				<el-form-item label="角色列表:"
				              prop="roleName"
				              label-width="100px">
					<el-select size="small"
					           v-model="dataFormModelData.roleName"
					           placeholder="角色列表"
					           >
						<el-option v-for="item in roleNameCombo"
						           :label="item.label"
						           :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模板列表:"
				              prop="templateName"
				              label-width="100px">
					<el-select size="small"
					           v-model="dataFormModelData.templateName"
					           placeholder="模板列表"
					          >
						<el-option v-for="item in combo"
						           :label="item.label"
						           :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button type="primary"
				           @click="indexmodelsave">提交</el-button>
				<el-button @click="dialogform = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogform: false,
			//页码数
			CurentPage: 1,
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//表单初始值
			emptyData: {
				id:'',
				roleName: '',//选择的角名
				templateName: '',//模板名
				status: '1'
			},
			//表单数据
			dataFormModelData: {
				id:'',
				roleName: '',//选择的角名
				templateName: '',//模板名
				status: '1'
			},
			roleNameCombo: [],//角色列表
			combo: [],//模板列表
			//校验规则：
			modelRule: {
				roleName: [{
					required: true,
					message: '请输入角色列表',
					trigger: 'blur'
				}],
				templateName: [{
					required: true,
					message: '请输入模板列表',
					trigger: 'blur'
				}]
			},
			inputsearch: "",
			formLabelWidth: '120px',
			selectarr: [],
		}
	},
	methods: {
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			debugger;
			this.$data.CurentPage = currentPage;
			this.indexmodlequery();
		},
		//查询
		indexmodlequery: function () {
				debugger;
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/crm/role/page',
				params: {
					templateName: this.$data.inputsearch, //查询条件
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {
				debugger;
				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})
		},
		//新增
		indexmodleAdd: function () {
			this.$data.dataRoleFormData = Object.assign(this.$data.dataFormModelData, this.$data.emptyData);
			this.$data.dialogform = true;
		},
		//保存
		indexmodelsave: function () {
			this.$refs.datamodelForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/crm/role/save', this.$data.dataFormModelData, {
						params: {
							uid: window.localStorage.getItem("uid")
						}
					})
						.then(resp => {
							//	debugger;
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.indexmodlequery();
								this.$data.dataRoleFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
			this.$data.dialogform = false;
		},
		//查询[角色列表]
		roleListQuery: function () {
//			debugger;
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/crm/config/roleCombo',
				params: {
					uid: window.localStorage.getItem("uid")
				}
			}).then(function (resp) {
//				debugger;
				this.$data.roleNameCombo = resp.data;
			}, function (error) {
				// error
			})
		},
		//查询[模板列表]
		modelListQuery: function () {
//			debugger;
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/crm/role/combo'
			}).then(function (resp) {
//				debugger;
				this.$data.combo = resp.data;
			}, function (error) {
				// error
			})
		},
		//编辑
		indexmodleEdit: function () {
			if (this.$data.selectarr.length == 1) {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/role/info', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					debugger;
					this.$data.dialogform = true;
					this.$data.dataFormModelData = resp.data.data;
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}

		},
		handleSelectionChange: function (value) {
			this.$data.selectarr = value;
			if (this.$data.selectarr.length > 1) {
				this.$message.error("请选择一条数据")
			}
		},
		//启用
		startindexmodle: function () {
			if (this.$data.selectarr.length == 1) {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/role/start', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					debugger;
					this.$message(resp.data.msg);
					this.indexmodlequery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//停用
		stopindexmodle: function () {
			if (this.$data.selectarr.length == 1) {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/role/stop', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.indexmodlequery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		timeFormates: function (row, column) {
			if (row.status == 0) return "已停用";
			return "已启用";
		}
	},
	created: function () {
		this.indexmodlequery();
		this.roleListQuery(); //查询角色下拉列表
		this.modelListQuery();//查询模板下拉列表
	}
}
</script>

<style>

</style>